<template>
  <div class="container">
    <div class="header">
      高校选课系统
    </div>
    <span
      >你好呀，{{ userName }} <em>{{ title }}</em></span
    >
    <!-- <el-watermark content="zhq出品">
      <div style="height: 300px;"></div>
    </el-watermark> -->
    <span>现在是：{{ currentTime }}</span>
    <span>祝你开心每一天🎉</span>
  </div>
</template>

<script lang="ts" setup>
import { UserRoleEnum } from "@/types/global-types.d";
import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from "vue";
import { useGlobalStore } from "@/stores/global";
// import { formatDate } from "date-fns"

const global = useGlobalStore();
const { userName, userRole } = global;

const title = computed(() => {
  if (!userRole) return "";

  return userRole === UserRoleEnum.STUDENT
    ? "同学"
    : userRole === UserRoleEnum.TEACHER
      ? "老师"
      : "管理员";
});

const currentTime = ref("");
let timer: number | null = null;

/**
 * 启动计时器
 */
const startTimer = () => {
  // 1.格式当前时间，无日期
  // timer = setInterval(() => currentTime.value = new Date().toLocaleTimeString(), 1000);

  // 2.使用内置函数格式化成本地时间
  timer = setInterval(() => currentTime.value = new Date().toLocaleString(), 1000);

  // 3.使用date-fns 快速格式化时间
  // timer = setInterval(() => currentTime.value = formatDate(new Date(), 'yyyy年MM月dd日hh时mm分ss秒'), 1000);
};

/**
 * 关闭计时器，防止内存泄漏
 */
const killTimer = () => {
  clearInterval(timer as number);
};

onMounted(() => {
  startTimer();
});

onUnmounted(() => {
  killTimer();
});
</script>

<style scoped>
.container {
  background-color: #f5f7fa;
  /* 遇过最离谱的bug，难怪无论怎么调页面都没有变化，原来文字和背景同色，看不出来。。。 */
  color: black;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* overflow-y: auto; */
}

span {
  /* font-weight: bold; */
  font-size: 2.5rem;
}

em {
  font-weight: bold;
}

.header {
  font-size: 64px;
  /* display: flex;
  align-items: center; */
  justify-content: center;
  /* margin-top: 100px;
  margin-bottom: 100px; */
  margin: 100px;
  font-weight: bolder;
  letter-spacing: 20px;
}
</style>
